<template>
	<view>
		<view class="lib-tags-list">
			<u-tag :text="item.collection_name" :plain="type!=item.type" size="mini" v-for="item in tagList"
				:closable="item.type==1?false:true" @close="closeTag(item.type)" @click="changeType(item.type)" ></u-tag>
			<u-tag text="添加" icon="plus" size="mini" class="lib-add" @click="addTag()"></u-tag>
		</view>
		<view class="lib-list">
			<view class="lib-list-item" v-for="item in list">
				<image src="../../static/images/t1.jpg" mode="" class="img"></image>
				<view class="right">
					<view class="name">
						{{item.product_title}}
					</view>
					<view class="price">
						到手价：{{item.product_price}}
					</view>
				</view>
				<u-checkbox  @change="updateSelected"></u-checkbox>
			</view>
		</view>
		<u-popup :show="addTagShow" title="添加合集" mode="center">
			<view class="ad-tag-bg">
				<h2>添加合集</h2>
				<u--input v-model="collName" class="ad-tag-input"></u--input>
				<view class="ad-tag-btn">
					<u-button type="default" text="取消" @click="addTagShow=false"></u-button>
					<u-button type="primary" text="确定" @click="addTagFun()"></u-button>
				</view>
			</view>

		</u-popup>
		<view class="lib-edit">
			<checkbox>全选</checkbox>
			<view class="dele">
				删除
			</view>
			<view class="tb">
				同步至
			</view>
			<view class="link" @click="linkColl()">
				链接
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collName: '',
				addTagShow: false,
				list: [],
				tagList: [],
				type:1
			}
		},
		onLoad() {
			this.getData()
			this.getTypeList()
		},
		methods: {
			changeType(type){
				this.type = type;
				this.getData();
			},
			linkColl(){
				this.$api.linkColl({
					coll_type:1
				}).then(res=>{
					uni.setClipboardData({
						data: res.collection_link,
						success: () => {
							uni.showToast({
								title: '复制成功',
								duration: 2000
							});
						},
						fail: (res) => {
							console.log(res)
							uni.showToast({
								title: '复制失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				})
			},
			addTagFun() {
				this.$api.nameColl({
					coll_name: this.collName
				}).then(res => {
					uni.showToast({
						title: '添加成功',
						duration: 2000
					});
					this.collName = ''
					this.addTagShow = false
					this.getTypeList()
				})
			},
			closeTag(id) {
				this.$api.deleteColl({
					coll_type: id
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.getData()
				})
			},
			getData() {
				this.$api.getCollList({
					coll_type:this.type
				}).then(res => {
					this.list = res.product_list
				})
			
			},
			getTypeList(){
				this.$api.getCollType().then(res => {
					this.tagList = res
				})
			},
			addTag() {
				this.addTagShow = true
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-fade-enter-active:nth-child(1) {
		margin-right: 17rpx;
	}

	/deep/ .u-tag--mini {
		margin-top: 0 !important;
	}

	/deep/ .u-tag__close {
		top: 0 !important;
	}

	.lib-list-item {
		display: flex;
		align-items: center;
		height: 150rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		font-size: 22rpx;
		gap: 30rpx;

		.img {
			height: 110rpx;
			width: 110rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			flex-direction: column;
			height: 110rpx;
			justify-content: space-between;
			flex-shrink: 0;
			overflow: hidden;
			flex: 1;

			.name {
				font-size: 26rpx;
				color: #333;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.price {
				color: #666;
				font-size: 23rpx;
			}
		}
	}

	.lib-list {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		background: #f9f6f6;
	}

	.lib-add {
		margin-left: auto
	}

	.h1 {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
		margin: 30rpx 0;
		margin-bottom: 60rpx;
	}

	.lib-tags-list {
		display: flex;
		align-items: flex-end;
		padding: 20rpx;
		background: #f9f6f6;
		margin: 20rpx;
		gap: 10rpx;
		flex-wrap: wrap;
	}

	.ad-tag-btn {
		display: flex;
		justify-content: space-between;
	}

	.lib-edit {
		display: flex;
		align-items: center;
		height: 80rpx;
		position: fixed;
		width: 100%;
		padding: 20rpx;
		background: #f9f6f6;
		bottom: 50px;
		left: 0;
		box-sizing: border-box;
		font-size: 28rpx;

		.dele {
			color: #f9ae3d;
			margin: 0 30rpx;
		}

		.tb {
			color: #909399;
		}

		.link {
			color: #3c9cff;

			margin-left: auto;
		}
	}
	.ad-tag-bg{
		h2{
			text-align: center;
			font-size: 30rpx;
			margin-top:20rpx;
		}
	}
	.ad-tag-input{
		margin:20rpx;
	}
</style>